<template>
  <view class="myCollect">
    <view class="header">
      <!-- #ifdef APP-PLUS -->
      <!-- <view class="appAPPTop" :style="{paddingTop: pagePaddingTop+'px'}"></view> -->
      <!-- #endif -->
      <view class="header-title">
        <view class="icons" @click="back">
          <u-icon name="arrow-left"></u-icon>
        </view>
        <view class="title">{{ label }}</view>
        <view class="manage" v-if="label == '关注'"></view>
        <view class="manage" v-else @click="manages()">{{
          isManage ? "完成" : "管理"
        }}</view>
      </view>
      <view :class="['header-tabs', label == '关注' ? 'around' : 'between']">
        <view
          class="header-tabs-items"
          v-for="item in tabList"
          :key="item.activa"
          @click="tabsChange(item.activa)"
        >
          <view :class="['text', tabActive == item.activa ? 'actives' : '']">{{
            item.name
          }}</view>
        </view>
      </view>
    </view>
    <!-- 关注 -->
    <view class="focus" v-if="label == '关注'">
      <view class="focus-items" v-for="item in dataList" :key="item.relationId">
        <image class="img" :src="item.face"></image>
        <view class="info">
          <view class="name">{{ item.name }}</view>
          <view class="address">{{ item.domain }}</view>
        </view>
        <view class="focus-btn" @tap="focusBtns(item)">
          {{ item.focusBtn }}
        </view>
      </view>
    </view>
    <!-- 收藏 -->
    <view class="datalist" v-else>
      <view
        class="datalist-items"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <view v-if="isManage" class="">
          <image
            class="checksbox"
            :src="
              item.select
                ? '../../../static/tabbar/checkin.png'
                : '../../../static/tabbar/checkblank .png'
            "
          ></image>
        </view>
        <!-- 课程 -->
        <view
          class="details"
          v-if="tabActive == '1002001'"
          @click="handleCourse(item)"
        >
          <image class="img" :src="item.coverPath"></image>
          <view class="info">
            <view class="name">{{ item.seriesName || "--" }}</view>
            <view class="portrait">
              <image
                class="imgs"
                v-if="item.expertFace"
                :src="item.expertFace"
              ></image>
              <image
                class="imgs"
                v-else
                src="../../../static/tabbar/mine.png"
              ></image>
              <view class="name">{{ item.expertName || "--" }}</view>
            </view>
            <view class="info-btn">
              <view class="see">{{ item.seriesWatchCount || 0 }}人看过</view>
              <view class="info-red">
                <view v-if="item.isCharge == 0">
                  <span style="color: #4ead96">免费</span>
                </view>
                <view v-else-if="item.payStatus == 'PAID'">
                  <span style="color: #fb8d0c">已购买</span>
                </view>
                <view v-else> <span>￥</span>{{ item.price || 0 }} </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 场地 -->
        <view
          class="details"
          v-if="tabActive == '1002003'"
          @click="handleSite(item)"
        >
          <image class="img" :src="item.siteCover"></image>
          <view class="info">
            <view class="name">{{ item.siteName || "--" }}</view>
            <view class="address">
              <image class="imgs" src="@/static/img/site/location.png"></image>
              {{ item.siteAddress }}
            </view>
            <view class="info-btn">
              <view></view>
              <view class="word">详情</view>
            </view>
          </view>
        </view>
        <!-- 实践基地 -->
        <view
          class="details"
          v-if="tabActive == '1002002'"
          @click="handleBase(item)"
        >
          <image class="img" :src="item.trainingBaseCover"></image>
          <view class="score"> {{ item.scoreAvg || 0 }}分 </view>
          <view class="info">
            <view class="name">{{ item.name }}</view>
            <view class="portrait">
              <view class="address">
                {{ item.trainingBaseDetail | formatDetail }}
              </view>
              <view class="info-btn">
                <view class="info-red"
                  ><u-icon name="coupon-fill"></u-icon>余:{{
                    item.remain || "0"
                  }}</view
                >
                <view class="info-red">
                  <view v-if="item.isCharge == 0">
                    <span style="color: #4ead96">免费</span>
                  </view>
                  <view v-else>
                    <span>￥</span>{{ item.unitPrice || 0 }}/小时
                  </view>
                </view>
                <view :class="['word', item.reservation ? 'yword' : '']">
                  {{ item.reservation ? "已预约" : "预约" }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 话题 -->
    <view class="details" v-if="tabActive == '1002004'">
      <view class="topic">
        <view class="first" v-for="(item, index) in topicList" :key="index">
          <!-- 话题 -->
          <view v-if="item.type == 1">
            <view class="contain-top">
              <image
                class="contain-top-image"
                src="@/static/img/header.jpg"
                mode=""
                @click="gotoinfo"
              ></image>
              <view class="right">
                <view class="name">
                  {{ item.name }}
                </view>
                <view class="time">
                  {{ item.time }}
                </view>
              </view>
            </view>
            <view class="text">
              <span>{{ item.smtit }}</span>
            </view>
            <view class="first-main">
              <view class="title">
                {{ item.neirong }}
              </view>
              <view class="img">
                <image
                  class="image"
                  :src="v"
                  v-for="(v, i) in item.imgs"
                  :key="i"
                  mode=""
                  @tap="showBigImg(v)"
                ></image>
              </view>
              <view class="button">
                <view class="left">
                  <u-icon name="map-fill" color="#F4333C" size="28"></u-icon>
                  <view>成都市武侯区环球...</view>
                  <!-- <image class="left-img" src="./DZ.jpg" mode=""></image> -->
                </view>
                <view class="right">
                  <view class="lj">
                    <image src="@/static/community/share.png" mode=""></image>
                    <!-- <u-icon name="share" color="#ccc" size="40"></u-icon> -->
                    <span>{{ item.fenxiang }}</span>
                  </view>
                  <view class="lj">
                    <image src="@/static/community/comment.png" mode=""></image>
                    <!-- <u-icon name="chat" color="#ccc" size="40"></u-icon> -->
                    <span>{{ item.yuedu }}</span>
                  </view>
                  <view class="lj">
                    <image src="@/static/community/collect.png" mode=""></image>
                    <!-- <u-icon name="star" color="#ccc" size="40"></u-icon> -->
                    <span>{{ item.like }}</span>
                  </view>
                  <view class="lj">
                    <image src="@/static/community/good.png" mode=""></image>
                    <!-- <u-icon name="thumb-up" color="#ccc" size="40"></u-icon> -->
                    <span>{{ item.good }}</span>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- <image class="img" :src="item.coverPath"></image>
          <view class="info">
            <view class="name">{{ item.seriesName }}</view>
            <view class="portrait">
              <image
                class="imgs"
                v-if="item.expertFace"
                :src="item.expertFace"
              ></image>
              <image
                class="imgs"
                v-else
                src="../../../static/tabbar/mine.png"
              ></image>
              <view class="name">{{ item.expertName }}</view>
            </view>
            <view class="address" v-if="tabActive == '1002002'"
              ><image
                class="imgs"
                src="@/static/img/site/location.png"
                alt=""
              ></image>
              {{ item.region }}</view
            >
            <view class="duos"> </view>
            <view class="info-btn">
              <view class="see">{{ item.seriesWatchCount || "0" }}人看过</view>
              <view class="price"><span>￥</span>{{ item.price || 0 }}</view>
              <view class="word" v-if="tabActive == '1002002'">详情</view>
            </view>
          </view> -->
    </view>
    <!-- 动态 -->
    <view v-if="tabActive == '1002005'">
      <view class="dynamic">
        <view
          class="first"
          v-for="(item, index) in dynamicList"
          :key="index"
        >
          <!-- 话题 -->
          <view v-if="item.type == 1">
            <view class="contain-top">
              <image
                class="contain-top-image"
                src="@/static/img/header.jpg"
                mode=""
                @click="gotoinfo"
              ></image>
              <view class="right">
                <view class="name">
                  {{ item.name }}
                </view>
                <view class="time">
                  {{ item.time }}
                </view>
              </view>
            </view>
            <view class="text">
              <span>{{ item.smtit }}</span>
            </view>
            <view class="first-main">
              <view class="title" @click="godynamicInfo">
                {{ item.neirong }}
              </view>
              <video src="" class="dynamicVideo"></video>
              <view class="button">
                <view class="left">
                  <u-icon name="map-fill" color="#F4333C" size="28"></u-icon>
                  <view>成都市武侯区环球...</view>
                  <!-- <image class="left-img" src="./DZ.jpg" mode=""></image> -->
                </view>
                <view class="right">
                  <view class="lj">
                    <image src="@/static/community/share.png" mode=""></image>
                    <!-- <u-icon name="share" color="#ccc" size="40"></u-icon> -->
                    <span>{{ item.fenxiang }}</span>
                  </view>
                  <view class="lj">
                    <image src="@/static/community/comment.png" mode=""></image>
                    <!-- <u-icon name="chat" color="#ccc" size="40"></u-icon> -->
                    <span>{{ item.yuedu }}</span>
                  </view>
                  <view class="lj">
                    <image src="@/static/community/collect.png" mode=""></image>
                    <!-- <u-icon name="star" color="#ccc" size="40"></u-icon> -->
                    <span>{{ item.like }}</span>
                  </view>
                  <view class="lj">
                    <image src="@/static/community/good.png" mode=""></image>
                    <!-- <u-icon name="thumb-up" color="#ccc" size="40"></u-icon> -->
                    <span>{{ item.good }}</span>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="loadMore" />
    <view class="foot" v-if="isManage">
      <view class="checkAll" @click="checkAll">
        <image
          class="checksbox"
          :src="
            isAll
              ? '../../../static/tabbar/checkin.png'
              : '../../../static/tabbar/checkblank .png'
          "
        ></image>
        <view class="word">全选</view>
      </view>
      <view class="del" @click="del">删除</view>
    </view>
    <u-modal
      v-model="isCencel"
      :content="contentMsg"
      :show-cancel-button="true"
      @confirm="submitForm"
    ></u-modal>
  </view>
</template>
<script>
import { API } from "@/config/myApi.js";
export default {
  data() {
    return {
      label: "", //关注 or 收藏
      tabActive: "", //选中tab
      pageNumber: 1, //分页
      loadMore: "loadmore", //加载更多
      tabList: [], //当前tab列表
      collectTab: [
        // 收藏列表
        {
          name: "课程",
          activa: "1002001",
        },
        {
          name: "场地",
          activa: "1002003",
        },
        {
          name: "实践基地",
          activa: "1002002",
        },
        {
          name: "话题",
          activa: "1002004",
        },
        {
          name: "动态",
          activa: "1002005",
        },
      ],
      focusTab: [
        // 关注
        {
          name: "专家",
          activa: "0",
        },
        {
          name: "用户",
          activa: "1",
        },
      ],
      //   话题列表
      topicList: [
        {
          type: 1,
          id: 1,
          name: "C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          smtit: "跑步人的一天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          imgs: [
            require("@/static/bg.png"),
            require("@/static/bg.png"),
            require("@/static/bg.png"),
            require("@/static/bg.png"),
            require("@/static/bg.png"),
            require("@/static/bg.png"),
          ],
          fenxiang: 14,
          yuedu: 23,
          like: 13,
          good: 23,
        },
        {
          type: 1,
          id: 1,
          name: "C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          smtit: "跑步人的一天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          imgs: [
            require("@/static/bg.png"),
            require("@/static/bg.png"),
            require("@/static/bg.png"),
            require("@/static/bg.png"),
            require("@/static/bg.png"),
            require("@/static/bg.png"),
          ],
          fenxiang: 14,
          yuedu: 23,
          like: 13,
          good: 23,
        },
      ],
      //   动态列表
      dynamicList: [
        {
          type: 1,
          id: 1,
          name: "C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          smtit: "跑步人的一天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          video: "",
          fenxiang: 14,
          yuedu: 23,
          like: 13,
          good: 23,
        },
        {
          type: 1,
          id: 1,
          name: "C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          smtit: "跑步人的一天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          video: "",
          fenxiang: 14,
          yuedu: 23,
          like: 13,
          good: 23,
        },
      ],
      dataList: [], //数据列表
      isManage: false, //是否开启全选功能
      isAll: false, //是否全选
      chooseList: [], //全选列表
      isCencel: false, // 取消关注弹窗
      handfleRow: {}, // 操作的内容
      contentMsg: "", // 弹窗提示
    };
  },
  onLoad(option) {
    this.label = option.label;
    // this.label = '我的收藏';
    if (this.label == "关注") {
      this.tabActive = "0";
      this.tabList = this.focusTab;
      this.getfindIdol("pull");
    } else {
      this.tabActive = "1002001";
      this.tabList = this.collectTab;
      this.getCollect("pull");
    }
  },
  onPullDownRefresh() {
    let obj = {
      success: () => {
        uni.showToast({
          title: "刷新成功",
          icon: "success",
        });
      },
      fail: () => {
        uni.showToast({
          title: "刷新失败",
          icon: "warn",
        });
      },
    };
    uni.startPullDownRefresh(obj);
    this.pageNumber = 1;
    if (this.label == "关注") {
      this.getfindIdol("pull");
    } else {
      this.getCollect("pull");
    }
  },
  onReachBottom() {
    // 上划加载
    this.pageNumber++;
    if (this.label == "关注") {
      this.getfindIdol("push");
    } else {
      this.getCollect("push");
    }
  },
  filters: {
    // 过滤富文本
    formatDetail(v) {
      let a = v.replace(/<[^>]+>/g, "");
      return a;
    },
  },
  methods: {
    // 取消关注
    focusBtns(v) {
      this.contentMsg = "确认取消关注吗？";
      this.handfleRow = v;
      this.isCencel = true;
    },
    // 提交取消关注
    submitForm() {
      const pram = {
        dataIds: this.handfleRow.id,
        type: this.tabActive,
      };
      API.delIdolAsync(pram).then((res) => {
        this.$u.toast("已取消关注");
        this.getfindIdol();
      });
    },
    //课程详情
    handleCourse(v) {
      if (this.isManage) {
        for (var i = 0; i < this.chooseList.length; i++) {
          if (this.chooseList[i] == v.id) {
            this.chooseList.splice(i, 1);
            i--;
          }
        }
        this.dataList.forEach((i) => {
          if (i.id == v.id) i.select = !i.select;
        });
        this.chooseList = this.dataList
          .filter((i) => i.select)
          .map((a) => {
            return a.id;
          });
        this.$forceUpdate();
      } else {
        let data = {
          id: v.id,
        };
        uni.navigateTo({
          url: "/pages/course/courseDetail?val=" + JSON.stringify(data),
        });
      }
    },
	//点击放大图片
    showBigImg(img) {
      let arr = [];
      arr.push(img);
      console.log(arr, "图片的地址");
      uni.previewImage({
        current: 0,
        urls: arr, //必须是网址路径，否则加载不出来，如：http：或https：
      });
    },
    // 场地详情
    handleSite(v) {
      if (this.isManage) {
        for (var i = 0; i < this.chooseList.length; i++) {
          if (this.chooseList[i] == v.siteId) {
            this.chooseList.splice(i, 1);
            i--;
          }
        }
        this.dataList.forEach((i) => {
          if (i.siteId == v.siteId) i.select = !i.select;
        });
        this.chooseList = this.dataList
          .filter((i) => i.select)
          .map((a) => {
            return a.siteId;
          });
        this.$forceUpdate();
      } else {
        uni.navigateTo({
          url: `/pages/site/detail?id=${v.siteId}`,
        });
      }
    },
    // 基地详情
    handleBase(v) {
      if (this.isManage) {
        for (var i = 0; i < this.chooseList.length; i++) {
          if (this.chooseList[i] == v.trainingBaseId) {
            this.chooseList.splice(i, 1);
            i--;
          }
        }
        this.dataList.forEach((i) => {
          if (i.trainingBaseId == v.trainingBaseId) i.select = !i.select;
        });
        this.chooseList = this.dataList
          .filter((i) => i.select)
          .map((a) => {
            return a.trainingBaseId;
          });
        this.$forceUpdate();
      } else {
        uni.navigateTo({
          url: `/pages/base/detail?id=${v.trainingBaseId}`,
        });
      }
    },
    // 获取收藏列表
    getCollect(action) {
      const pram = {
        pageNumber: this.pageNumber,
        pageSize: 10,
        type: this.tabActive,
      };
      this.loadMore = "loading";
      API.getSelectCollect(pram)
        .then((res) => {
          const data = res.result.records || [];
          this.loadMore =
            data.length == 0 || data.length < 10 ? "nomore" : "loadmore";
          if (action == "pull") {
            this.dataList = data;
          } else {
            this.dataList = this.dataList.concat(data);
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    },
    // 获取关注列表
    getfindIdol(action) {
      const pram = {
        pageNumber: this.pageNumber,
        pageSize: 10,
        type: this.tabActive,
      };
      this.loadMore = "loading";
      API.findIdol(pram)
        .then((res) => {
          if (res.code == 200) {
            const data = res.result.records || [];
            this.loadMore =
              data.length == 0 || data.length < 10 ? "nomore" : "loadmore";
            for (let item of data) {
              item.focusBtn = "已关注";
            }
            if (action == "pull") {
              this.dataList = data;
            } else {
              this.dataList = this.dataList.concat(data);
            }
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    },
    // tab切换
    tabsChange(e) {
      console.log(e);
      this.tabActive = e;
      this.dataList = [];
      this.chooseList = [];
      this.pageNumber = 1;
      if (this.label == "关注") {
        this.getfindIdol("pull");
      } else {
        this.getCollect("pull");
      }
    },
    // 开启、关闭选择功能
    manages() {
      this.isManage = !this.isManage;
      if (this.isManage) {
        this.isAll = false;
        this.chooseList = [];
        this.dataList.forEach((i) => {
          i.select = false;
        });
      }
    },
    // 返回
    back() {
      uni.switchTab({
        url: "/pages/tabbar/user/my",
      });
    },
    // 删除
    del() {
      let params = {
        dataIds: this.chooseList.join(","),
        typeId: this.tabActive,
      };
      API.delCollect(params).then((res) => {
        if (res.success) {
          console.log(res);
          this.$u.toast("删除成功");
          this.chooseList = [];
          this.isAll = false;
          this.isManage = false;
          this.pageNumber = 1;
          this.getCollect("pull");
        }
      });
    },
    // 全选
    checkAll() {
      const len = this.dataList.length;
      this.isAll = !this.isAll;
      this.chooseList = [];
      this.dataList.forEach((i) => {
        this.chooseList.push(i.id);
        i.select = this.isAll ? true : false;
      });
    },
    // 动态详情
    godynamicInfo() {
      uni.navigateTo({
        url: "/pages/tabbar/user/dynamicinfo/dynamicInfo",
      });
    },
	 gotoinfo() {
      console.log(123);
      uni.navigateTo({
        url: "/pages/community/personalCenter/personalCenter",
      });
    },
    // 单选
    chooseHandle(choose, index) {
      this.dataList[index].select = !choose;
      let chooseList = [];
      const dataList = [];
      for (let item of this.dataList) {
        if (item.select == 1) {
          dataList.push(item.id);
        }
      }
      this.chooseList = dataList;
      if (dataList.length == this.dataList.length) {
        this.isAll = true;
      } else {
        this.isAll = false;
      }
      uni.setStorageSync("dataList", dataList);
      const data = uni.getStorageSync("dataList");
      console.log(choose, index, data, "555", this.chooseList);
    },
  },
};
</script>

<style lang="scss">
@import "../aless/myCollect.scss";
// 话题
.topic {
  width: 750rpx;
  // height: 1210rpx;
  background-color: #ffffff;
  padding: 0 20rpx;
  .first {
    width: 100%;
    padding: 20rpx;
    margin-bottom: 40rpx;
    .contain-top {
      display: flex;
      align-items: center;
      .contain-top-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      .right {
        display: flex;
        flex-direction: column;
        .name {
          margin-right: 20rpx;
          font-size: 30rpx;
        }
        .time {
          color: #999999;
          margin-top: 10rpx;
        }
      }
    }
    .text {
      font-size: 30rpx;
      font-weight: 400;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 60rpx;
      // border: 1px solid red;
      margin-bottom: 10rpx;
      .bq {
        font-size: 10rpx;
        background-color: #d0d0d0;
        color: #fff;
        padding: 10rpx 20rpx;
        margin-left: 20rpx;
      }
    }
    .first-main {
      width: 100%;
      // height: 200rpx;
      // border: 1px solid red;

      .title {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 20rpx;
      }
      .img {
        width: 100%;
        display: flex;
        margin: 0 10rpx;
        flex-wrap: wrap;
        .image {
          width: 30%;
          height: 150rpx;
          margin: 8rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }
      }

      .button {
        width: 100%;
        height: 60rpx;
        // border: 1rpx solid red;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          color: #f4333c;
          .left-img {
            width: 300rpx;
            height: 40rpx;
          }
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 300rpx;
          height: 60rpx;
          .lj {
            color: #9d9d9d;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            // justify-content: space-around;
            margin-right: 5rpx;
            image {
              width: 30rpx;
              height: 30rpx;
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }
}
// 动态
.dynamic {
  width: 750rpx;
  // height: 1210rpx;
  background-color: #ffffff;
  padding: 0 20rpx;
  .first {
    width: 100%;
    padding: 20rpx;
    margin-bottom: 40rpx;
    .contain-top {
      display: flex;
      align-items: center;
      .contain-top-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      .right {
        display: flex;
        flex-direction: column;
        .name {
          margin-right: 20rpx;
          font-size: 30rpx;
        }
        .time {
          color: #999999;
          margin-top: 10rpx;
        }
      }
    }
    .text {
      font-size: 30rpx;
      font-weight: 400;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 60rpx;
      color: #333333;
      margin-bottom: 10rpx;
    }
    .first-main {
      width: 100%;

      .title {
        color: #666666;
        line-height: 40rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 20rpx;
      }
      .dynamicVideo {
        width: 100%;
        height: 320rpx;
        border-radius: 20rpx;
      }

      .button {
        width: 100%;
        height: 60rpx;
        // border: 1rpx solid red;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          color: #f4333c;
          .left-img {
            width: 300rpx;
            height: 40rpx;
          }
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 300rpx;
          height: 60rpx;
          .lj {
            color: #9d9d9d;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            // justify-content: space-around;
            margin-right: 5rpx;
            image {
              width: 30rpx;
              height: 30rpx;
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>
